@extends('layouts.userctl')
@section('content')
<style>
	.formpage {
		width: 800px;
		height: auto;
		margin: 10px auto;
	}

	.layui-form-label {
		width: 150px;
	}

	.layui-input-block {
		margin-left: 150px;
	}

	.needed {
		color: #e62828;
	}

	.layui-form-item .layui-input-inline {
		width: 152px;
	}

	.mainpeo {
		flex: 1;
		margin-right: 10px;
	}
	.lastright {
		margin-right: 0 !important;
	}
	.uploading1 {
		display: none;
	}

	.uploading2 {
		display: none;
	}

	.delrow {
		font-size: 34px;
		color: #F0280F;
	}

	.delrow:hover {
		background-color: #EEEEEE;
	}
</style>
<div class="formpage">
	<form class="layui-form" action="{{route('admin.user.chgresident')}}" method="post"
		onkeypress="return event.keyCode != 13;">
		{{csrf_field()}}
		<input type="hidden" name="user_id" value="{{$com->userinfo?$com->userinfo->id:''}}" />
		<div class="layui-form-item">
			<label class="layui-form-label">门牌号<span class="needed">*</span></label>
			<div class="layui-input-block">
				<input type="text" name="door_code" placeholder="请输入门牌号" class="layui-input"
					value="{{$com->resident?$com->resident->door_code:''}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">户主姓名<span class="needed">*</span></label>
			<div class="layui-input-block">
				<input type="text" name="leader" placeholder="请输入户主姓名" class="layui-input" value="{{$com->comName}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">身份证号<span class="needed">*</span></label>
			<div class="layui-input-block">
				<input type="text" name="idcard" placeholder="请输入身份证号" class="layui-input" value="{{$com->idcard}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">出生年月<span class="needed">*</span></label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" id="birthday" name="birthday" value="{{$com->resident?$com->resident->birthday:''}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">地址<span class="needed">*</span></label>
			<div class="layui-input-block" style="display: flex;flex-direction: row;">
				<div class="layui-input-inline" style="flex: 1;">
					<select name="province" lay-verify="required" lay-filter="provincediv" id="provincediv"
						lay-search>
						<option value="">请选择省份</option>
						@foreach($provinces as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
				<div class="layui-input-inline" style="flex: 1;">
					<select name="city" lay-verify="required" lay-filter="citydiv" id="citydiv"
						lay-search>
						<option value="">请选择市</option>
						@foreach($citys as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
				<div class="layui-input-inline" style="flex: 1;">
					<select name="district" lay-verify="required" lay-filter="districtdiv"
						id="districtdiv" lay-search>
						<option value="">请选择县/区</option>
						@foreach($districts as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
				<div class="layui-input-inline" style="flex: 1.5;margin-right: 0;">
					<select name="street" lay-verify="required" lay-filter="streetdiv"
						id="streetdiv" lay-search>
						<option value="">请选择镇/街道</option>
						@foreach($streets as $p)
						<option value="{{$p['id']}}">{{$p['name']}}</option>
						@endforeach
					</select>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-block">
				<select name="community" lay-filter="communitydiv"
					id="communitydiv" lay-search>
					<option value="">请选择社区</option>
					@foreach($communitys as $p)
					<option value="{{$p['id']}}">{{$p['name']}}</option>
					@endforeach
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-block">
				<input type="text" name="address" placeholder="请输入详细地址" class="layui-input" value="{{$com->address}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">居住面积(m²)</label>
			<div class="layui-input-block">
				<input type="text" name="live_area" placeholder="请输入居住面积" class="layui-input"
					value="{{$com->resident?$com->resident->live_area:''}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">居住人数<span class="needed">*</span></label>
			<div class="layui-input-block">
				<input type="text" name="live_people" placeholder="请输入居住人数" class="layui-input"
					value="{{$com->resident?$com->resident->live_people:''}}">
			</div>
		</div>
		@if(is_array($live_info))
		@foreach($live_info as $k=>$v)
		<div class="layui-form-item live_info">
			<label class="layui-form-label">
				@if($k==0)
				同住人信息<span class="needed">*</span>
				@endif
			</label>
			<div class="layui-input-block" style="display: flex;flex-direction: row;">
				<input type="text" name="live_info_1[]" placeholder="请填写姓名" class="layui-input mainpeo" value="{{$v->live_info_1}}">
				<input type="text" name="live_info_2[]" placeholder="请填写身份证号" class="layui-input mainpeo" value="{{$v->live_info_2}}">
				<input type="text" name="live_info_3[]" placeholder="请填写电话" class="layui-input mainpeo" value="{{$v->live_info_3}}">
				<i class="layui-icon layui-icon-delete delrow"></i> 
			</div>
		</div>
		@endforeach
		@endif
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-block" style="display: flex;flex-direction: row;">
				<button type="button" class="layui-btn layui-btn-normal" id="add1">点击添加同住人信息</button>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">住户类型<span class="needed">*</span></label>
			<div class="layui-input-block">
				<select name="live_type" id="live_type" class="setselect" data-value="{{$com->resident->live_type??''}}">
					<option value="">请选择住户类型</option>
					<option value="1">住户</option>
					<option value="2">租户</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">老人类型<span class="needed">*</span></label>
			<div class="layui-input-block">
				<select name="old_type" id="old_type" class="setselect" data-value="{{$com->resident->old_type??''}}">
					<option value="">请选择老人类型</option>
					<option value="1">独居老人</option>
					<option value="2">孤寡老人</option>
					<option value="3">其他</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">冬季取暖方式</label>
			<div class="layui-input-block">
				<select name="warm_type" id="warm_type" class="setselect" data-value="{{$com->resident->warm_type??''}}">
					<option value="">请选择冬季取暖方式</option>
					<option value="1">煤取暖</option>
					<option value="2">空气能取暖</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">报警器情况</label>
			<div class="layui-input-block">
				<select name="alarm_type" id=alarm_type" class="setselect" data-value="{{$com->resident->alarm_type??''}}">
					<option value="">请选择报警器情况</option>
					<option value="1">正常</option>
					<option value="2">缺失</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">燃气类型<span class="needed">*</span></label>
			<div class="layui-input-block">
				<select name="fire_type" id="fire_type" class="setselect" data-value="{{$com->resident->fire_type??''}}">
					<option value="">请选择燃气类型</option>
					<option value="1">液化气</option>
					<option value="2">天然气</option>
					<option value="3">醇基燃料</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">液化气5kg钢瓶数(租赁)</label>
			<div class="layui-input-block">
				<input type="text" name="fire5_num1" placeholder="液化气5kg钢瓶数(租赁)" class="layui-input"
					value="{{$com->resident?$com->resident->fire5_num1:''}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">液化气5kg钢瓶数(购买)</label>
			<div class="layui-input-block">
				<input type="text" name="fire5_num2" placeholder="液化气5kg钢瓶数(购买)" class="layui-input"
					value="{{$com->resident?$com->resident->fire5_num2:''}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">液化气15kg钢瓶数(租赁)</label>
			<div class="layui-input-block">
				<input type="text" name="fire15_num1" placeholder="液化气15kg钢瓶数(租赁)" class="layui-input"
					value="{{$com->resident?$com->resident->fire15_num1:''}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">液化气15kg钢瓶数(购买)</label>
			<div class="layui-input-block">
				<input type="text" name="fire15_num2" placeholder="液化气15kg钢瓶数(购买)" class="layui-input"
					value="{{$com->resident?$com->resident->fire15_num2:''}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">液化气50kg钢瓶数(租赁)</label>
			<div class="layui-input-block">
				<input type="text" name="fire50_num1" placeholder="液化气50kg钢瓶数(租赁)" class="layui-input"
					value="{{$com->resident?$com->resident->fire50_num1:''}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">液化气50kg钢瓶数(购买)</label>
			<div class="layui-input-block">
				<input type="text" name="fire50_num2" placeholder="液化气50kg钢瓶数(购买)" class="layui-input"
					value="{{$com->resident?$com->resident->fire50_num2:''}}">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">农田数（亩）<span class="needed">*</span></label>
			<div class="layui-input-block">
				<input type="text" name="farm_num" placeholder="请输入农田数" class="layui-input"
					value="{{$com->resident?$com->resident->farm_num:''}}">
			</div>
		</div>
		@if(is_array($farm_info))
		@foreach($farm_info as $k=>$v)
		<div class="layui-form-item farm_info">
			<label class="layui-form-label">
				@if($k==0)
				牲畜情况<span class="needed">*</span>
				@endif
			</label>
			<div class="layui-input-block" style="display: flex;flex-direction: row;">
				<select name="farm_info_1[]" class="setselect"  data-value="{{$v->farm_info_1}}">
					<option value="">请选择牲畜类型</option>
					<option value="1">鸡</option>
					<option value="2">鸭</option>
					<option value="3">鹅</option>
					<option value="4">狗</option>
					<option value="5">猪</option>
					<option value="6">牛</option>
					<option value="7">羊</option>
				</select>
				<input type="text" name="farm_info_2[]" placeholder="请填写数量(只/头)" class="layui-input mainpeo" style="margin-left:10px;" value="{{$v->farm_info_2}}">
				<i class="layui-icon layui-icon-delete delrow"></i> 
			</div>
		</div>
		@endforeach
		@endif
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-block" style="display: flex;flex-direction: row;">
				<button type="button" class="layui-btn layui-btn-normal" id="add2">点击添加牲畜信息</button>
			</div>
		</div>
		
		@if(is_array($car_info))
		@foreach($car_info as $k=>$v)
		<div class="layui-form-item car_info">
			<label class="layui-form-label">
				@if($k==0)
				车辆情况<span class="needed">*</span>
				@endif
			</label>
			<div class="layui-input-block" style="display: flex;flex-direction: row;">
				<select class="setselect" name="car_info_1[]" data-value="{{$v->car_info_1}}">
					<option value="">请选择车辆类型</option>
					<option value="1">轿车</option>
					<option value="2">越野车</option>
					<option value="3">商务车</option>
					<option value="4">摩托车</option>
					<option value="5">货车</option>
					<option value="6">面包车</option>
					<option value="7">客车</option>
					<option value="8">皮卡车</option>
				</select>
				<select class="setselect" name="car_info_2[]" data-value="{{$v->car_info_2}}">
					<option value="">请选择能源</option>
					<option value="1">汽油</option>
					<option value="2">柴油</option>
					<option value="3">油电混合</option>
					<option value="4">新能源</option>
					<option value="5">汽油+48V轻混系统</option>
				</select>
				<input type="text" name="car_info_3[]" placeholder="请填写辆数 (辆)" class="layui-input mainpeo" style="margin-left:10px;" value="{{$v->car_info_3}}">
				<i class="layui-icon layui-icon-delete delrow"></i> 
			</div>
		</div>
		@endforeach
		@endif	
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-block" style="display: flex;flex-direction: row;">
				<button type="button" class="layui-btn layui-btn-normal" id="add3">点击添加车辆信息</button>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">其他备注</label>
			<div class="layui-input-block">
				<input type="text" name="note" placeholder="请输入其他备注" class="layui-input"
					value="{{$com->resident?$com->resident->note:''}}">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">确定</button>
				<a href="{{ url()->previous() }}" class="layui-btn layui-btn-primary">返 回</a>
			</div>
		</div>
	</form>
</div>
<script>
	layui.use(['form','laydate','layer'], function() {
		var form = layui.form;
		var layer = layui.layer;
		var laydate = layui.laydate;
		  
		//执行一个laydate实例
		laydate.render({
			elem: '#birthday' //指定元素
		});
		$('#provincediv').val({{$com->province }})
		$('#citydiv').val({{$com->city }})
		$('#districtdiv').val({{$com->district }})
		$('#streetdiv').val({{$com->street }})
		$('#communitydiv').val({{$com->community }})
		
		$('.setselect').each(function(i){
			$(this).val($(this).attr('data-value'))
		})
		
		form.render();
		$('#add1').click(function() {
			if($('.live_info').length>0){
				$(this).parents('.layui-form-item').before(`<div class="layui-form-item live_info">
					<label class="layui-form-label"></label>
					<div class="layui-input-block" style="display: flex;flex-direction: row;">
						<input type="text" name="live_info_1[]" placeholder="请填写姓名" class="layui-input mainpeo" value="">
						<input type="text" name="live_info_2[]" placeholder="请填写身份证号" class="layui-input mainpeo" value="">
						<input type="text" name="live_info_3[]" placeholder="请填写电话" class="layui-input mainpeo" value="">
						<i class="layui-icon layui-icon-delete delrow"></i> 
					</div>
				</div>`)
			}else{
				$(this).parents('.layui-form-item').before(`<div class="layui-form-item live_info">
					<label class="layui-form-label">同住人信息<span class="needed">*</span></label>
					<div class="layui-input-block" style="display: flex;flex-direction: row;">
						<input type="text" name="live_info_1[]" placeholder="请填写姓名" class="layui-input mainpeo" value="">
						<input type="text" name="live_info_2[]" placeholder="请填写身份证号" class="layui-input mainpeo" value="">
						<input type="text" name="live_info_3[]" placeholder="请填写电话" class="layui-input mainpeo" value="">
						<i class="layui-icon layui-icon-delete delrow"></i> 
					</div>
				</div>`)
			}
			form.render('select')
		})


		$('#add2').click(function() {
			if($('.farm_info').length>0){
				$(this).parents('.layui-form-item').before(`<div class="layui-form-item farm_info">
					<label class="layui-form-label"></label>
					<div class="layui-input-block" style="display: flex;flex-direction: row;">
						<select name="farm_info_1[]">
							<option value="">请选择牲畜类型</option>
							<option value="1">鸡</option>
							<option value="2">鸭</option>
							<option value="3">鹅</option>
							<option value="4">狗</option>
							<option value="5">猪</option>
							<option value="6">牛</option>
							<option value="7">羊</option>
						</select>
						<input type="text" name="farm_info_2[]" placeholder="请填写数量(只/头)" class="layui-input mainpeo" style="margin-left:10px;" value="">
						<i class="layui-icon layui-icon-delete delrow"></i> 
					</div>
				</div>`)
			}else{
				$(this).parents('.layui-form-item').before(`<div class="layui-form-item farm_info">
					<label class="layui-form-label">牲畜情况<span class="needed">*</span></label>
					<div class="layui-input-block" style="display: flex;flex-direction: row;">
						<select name="farm_info_1[]">
							<option value="">请选择牲畜类型</option>
							<option value="1">鸡</option>
							<option value="2">鸭</option>
							<option value="3">鹅</option>
							<option value="4">狗</option>
							<option value="5">猪</option>
							<option value="6">牛</option>
							<option value="7">羊</option>
						</select>
						<input type="text" name="farm_info_2[]" placeholder="请填写数量(只/头)" class="layui-input mainpeo" style="margin-left:10px;" value="">
						<i class="layui-icon layui-icon-delete delrow"></i> 
					</div>
				</div>`)
			}
			form.render('select')
		})
		
		$('#add3').click(function() {
			if($('.car_info').length>0){
				$(this).parents('.layui-form-item').before(`<div class="layui-form-item car_info">
					<label class="layui-form-label"></label>
					<div class="layui-input-block" style="display: flex;flex-direction: row;">
						<select name="car_info_1[]">
							<option value="">请选择车辆类型</option>
							<option value="1">轿车</option>
							<option value="2">越野车</option>
							<option value="3">商务车</option>
							<option value="4">摩托车</option>
							<option value="5">货车</option>
							<option value="6">面包车</option>
							<option value="7">客车</option>
							<option value="8">皮卡车</option>
						</select>
						<select name="car_info_2[]">
							<option value="">请选择能源</option>
							<option value="1">汽油</option>
							<option value="2">柴油</option>
							<option value="3">油电混合</option>
							<option value="4">新能源</option>
							<option value="5">汽油+48V轻混系统</option>
						</select>
						<input type="text" name="car_info_3[]" placeholder="请填写辆数 (辆)" class="layui-input mainpeo" style="margin-left:10px;" value="">
						<i class="layui-icon layui-icon-delete delrow"></i> 
					</div>
				</div>`)
			}else{
				$(this).parents('.layui-form-item').before(`<div class="layui-form-item car_info">
					<label class="layui-form-label">车辆情况<span class="needed">*</span></label>
					<div class="layui-input-block" style="display: flex;flex-direction: row;">
						<select name="car_info_1[]">
							<option value="">请选择车辆类型</option>
							<option value="1">轿车</option>
							<option value="2">越野车</option>
							<option value="3">商务车</option>
							<option value="4">摩托车</option>
							<option value="5">货车</option>
							<option value="6">面包车</option>
							<option value="7">客车</option>
							<option value="8">皮卡车</option>
						</select>
						<select name="car_info_2[]">
							<option value="">请选择能源</option>
							<option value="1">汽油</option>
							<option value="2">柴油</option>
							<option value="3">油电混合</option>
							<option value="4">新能源</option>
							<option value="5">汽油+48V轻混系统</option>
						</select>
						<input type="text" name="car_info_3[]" placeholder="请填写辆数 (辆)" class="layui-input mainpeo" style="margin-left:10px;" value="">
						<i class="layui-icon layui-icon-delete delrow"></i> 
					</div>
				</div>`)
			}
			form.render('select')
		})
		
		
		$(document).on('click', '.delrow', function() {
			$(this).parent().parent().remove()
		})
		
		//======================2级菜单===================
		form.on('select(provincediv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择市</option>'
			if (name == '') {
				$('#citydiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 2, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#citydiv').html(s)
						form.render('select')
					}
				})
			}
			$('#districtdiv').html('<option value="">请选择县/区</option>')
			$('#streetdiv').html('<option value="">请选择镇/街道</option>')
			$('#communitydiv').html('<option value="">请选择社区</option>')
			form.render('select')
		})

		//======================3级菜单===================
		form.on('select(citydiv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择县/区</option>'
			if (name == '') {
				$('#districtdiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 3, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						// console.log(result);
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#districtdiv').html(s)
						form.render('select')
					}
				})
			}
			$('#streetdiv').html('<option value="">请选择镇/街道</option>')
			$('#communitydiv').html('<option value="">请选择社区</option>')
			form.render('select')
		})
		//======================4级菜单===================
		form.on('select(districtdiv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择镇/街道</option>'
			if (name == '') {
				$('#streetdiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 4, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#streetdiv').html(s)
						form.render('select')
					}
				})
			}
			$('#communitydiv').html('<option value="">请选择社区</option>')
			form.render('select')
		})
		//======================5级菜单===================
		form.on('select(streetdiv)', function(data) {
			var name = data.elem.selectedOptions[0].text
			var code = data.value
			var s = '<option value="">请选择社区</option>'
			if (name == '') {
				$('#communitydiv').html(s)
				form.render('select')
			} else {
				$.ajax({
					type: 'POST', //提交方式
					headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
					data: { lvl: 5, code },
					url: '/admin/area/getjson',
					success: function(result) {
						var list = result.data
						$.each(list, function(i, arr) {
							s = s + '<option value="' + arr.id + '">' +
								arr.name + '</option>'
						})
						$('#communitydiv').html(s)
						form.render('select')
					}
				})
			}
		})
		$('#backpage').click(function() {
			history.back(-1)
		})
		//监听提交
		form.on('submit(formDemo)', function(data) {
			var index = layer.load(0, { shade: false })
		})
	})
</script>

@endsection
